<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">

        <el-row class="search-input">

        </el-row>

    </div>

    <!--新增编辑界面-->
    <el-dialog :title="operation" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" :disabled="this.disabled">
        <el-row class="searchDialog-input">
          <el-form-item label="渠道编码：" prop="channelCode">
            <el-input v-model="dataForm.channelCode" auto-complete="off" placeholder="请输入编码" :disabled="this.disabled"></el-input>
          </el-form-item>
          <el-form-item label="渠道名称：" prop="channelName">
            <el-input v-model="dataForm.channelName" auto-complete="off" placeholder="请输入名称" :disabled="this.disabled"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>


    <div class="table-wrap">
      <jic-table
        :height="350"
        :operationWidth=300
        :tableList="tableList"
        :tableHeaderList="tableHeaderList"
        :totalSize="totalSize"
        :showDetailOperation=true
        :conceal=false
        :showEditOperation=false
        :showBatchDelete=false
        :showSelection=false
        :blockUp=false
        :startUsing=false
        :showIndex=false
        :showDeleteOperation=false
        @findPage="findPage"
        @handleDetail="handleDetail"
        @handleSizeChange="handleSizeChange"
        @handlePageChange="handlePageChange"
        ref="jicTable"
      ></jic-table>
    </div>

  </div>
</template>

<script>

import PopupTreeInput from "@/components/PopupTreeInput";
  import jicTable from '@/components/jicComponentGallery/jicTable';
  import KtButton from "@/views/Core/KtButton";
  import {quillEditor} from "vue-quill-editor";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {format} from "@/utils/datetime";
  import {exportExcel} from "@/utils/excel";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

export default {
  components: {
    PopupTreeInput,
    KtButton,
    TableColumnFilterDialog,
    quillEditor,
    jicTable
  },
  data() {
    return {
      content: "",
      totalSize: 0,
      operation: null,
      disabled: false,
      dialogVisible:false,
      editorOption: {
        modules: {
          imageDrop: true,
        },
        theme: "snow",
      },
      tableHeaderList: [

        {prop: "channelCode", label: "渠道编码", minWidth: 50},
        {prop: "channelName", label: "渠道名称", minWidth: 120},

      ],
      size: "small",
      filters: {},
      columns: [],
      tableList: [],
      filterColumns: [],
      pageRequest: {
        pageNum: 1,
        pageSize: 10,
      },
      pageResult: {},
      editDialogVisible: false, // 新增编辑界面是否显示
      dataFormRules: {
        afterSaleDate: [
          {
            required: true,
            message: "请输入截止日期",
            trigger: "blur",
          },
        ],
      },
      // 新增编辑界面数据
      dataForm: {
        channelCode: "",
        channelName: "",
      },
      shopList: [],
      statusList: [],
      checked: [],
      pageLoading: false, //列表加载
    };
  },
  methods: {
    // 获取分页数据
    findPage: function (data) {
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;

      this.utils.request.getmChannel(this_.filters, function (res) {
        if (res.code === "0000") {
          this_.tableList = res.data.list;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }
      });
    },
    //选择框
    selectionChange: function (params) {
      this.checked = params.selections;
    },
    // 详情页面
    handleDetail: function (params) {
      this.disabled = true;
      this.dialogVisible=true;
      this.editDialogVisible = true;
      this.operation = "详情";
      this.dataForm = {};
      this.$nextTick(function () {
        this.dataForm = Object.assign({}, params.row);
      });

    },
    // 时间格式化
    dateFormat: function (row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters = {};
        this.findPage(null);
      }
    },
    // 6.每页记录数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },
    // 7.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
  },
    mounted() {
      this.findPage();
    },
};
</script>

<style lang="scss" scoped>
.search-button {
  .el-form-item {
    &:last-of-type {
      margin-right: 0px !important;
    }
  }
}
</style>
